<template>
  <el-dialog title="裁剪" :visible.sync="visibleShow" class="el-dialog-big" :destroy-on-close="true">
    <Cropper ref="cropperRef" v-loading="loading" :aspectRatio="aspectRatio" :img-file="imgFile" @upload="handleCropperUplaod" @closeCropper="handleCloseCropper" />
  </el-dialog>
</template>
<script>
import axios from 'axios'
import Cropper from '@/components/Common/cropper/index.vue'
export default {
  components: {
    Cropper
  },
  props: {
    imgFile: {
      type: String,
      default: ''
    },
    imgName: {
      type: String,
      default: ''
    },
    aspectRatio: {
      type: Number,
      default: 1
    }
  },
  data() {
    var token = this.$store.state.user.token
    return {
      token,
      visibleShow: false,
      loading: false
    }
  },
  methods: {
    open(obj) {
      const { url } = obj
      this.visibleShow = true
      this.$nextTick(() => {
        this.$refs.cropperRef.setData(url)
      })
    },
    handleCloseCropper() {
      this.visibleShow = false
    },
    handleCropperUplaod(file) {
      this.uploadRequest(file)
    },
    uploadRequest(file) {
      this.loading = true
      var param = new window.FormData()
      param.append('file', file)
      // param.append('file', 'imageFile')
      axios
        .post(this.$store.state.app.upload_url_file, param, {
          headers: {
            'Content-Type': 'application/json;charset=UTF-8',
            Authorization: this.token
          }
        })
        .then(r => {
          this.loading = false
          this.$emit('success', r.data.data)
          this.visibleShow = false
        })
        .catch(e => {
          this.loading = false
          this.$message.error('上传失败')
        })
    }
  }
}
</script>
